<template>
  <div class="div">
    <!-- 面包屑 -->
    <div class="top-div">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">客户</el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">订货历史</a></el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- table表格div -->
    <div class="table-div">
      <!-- select选择器。 -->
      <el-select v-model="value01" placeholder="全部" style="width: 160px">
        <el-option
          v-for="item in options01"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <el-select
        v-model="value01"
        placeholder="全部"
        style="width: 160px; margin-left: 5px"
      >
        <el-option
          v-for="item in options02"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
      <!-- search搜索框。 -->
      <el-input
        v-model="formData"
        placeholder="输入客户名称/客户账号/源订单号"
        class="ordersituation-input"
      >
        <el-button slot="append" icon="el-icon-search" />
      </el-input>
      <template class="table-div-template">
        <el-table
          :data="tableData"
          style="width: 100%; height: 500px; margin-top: 10px"
          border="true"
          @cell-mouse-enter="enter"
          @cell-mouse-leave="leave"
        >
          <el-table-column prop="account" label="集团账号"></el-table-column>
          <el-table-column prop="teamName" label="集团名称"></el-table-column>
          <el-table-column prop="date" label="集团管理员"></el-table-column>
          <el-table-column prop="date" label="集团管理员"></el-table-column>
          <el-table-column prop="date" label="集团管理员"></el-table-column>
          <el-table-column prop="date" label="集团管理员"></el-table-column>
          <el-table-column label="地址">
            <template slot-scope="scope">
              <!-- {{ tableData[scope.$index].name }} -->
              {{ scope.row.name }}
              <div v-show="scope.row.id === isshow" class="el-butotn-div">
                <el-button>积分变动记录</el-button>
                <el-button>增加积分</el-button>
                <el-button>扣减积分</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>
     <!-- paging 分页 -->
    <div class="bottom-div">
      <span class="demonstration"></span>
      <el-pagination
        class="bottom-div-paging"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage1"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        background
        layout="total, prev, pager, next, sizes , jumper"
        :total="8"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isshow: -1,
      options01: [
        {
          value: '选项1',
          label: '全部',
        },
        {
          value: '选项2',
          label: '已下单',
        },
        {
          value: '选项3',
          label: '未下单',
        },
      ],
      value01: '',
      options02: [
        {
          value: '选项1',
          label: '全部区域',
        },
        {
          value: '选项2',
          label: '天心区',
        },
        {
          value: '选项3',
          label: '雨花区',
        },
      ],
      value02: '',
      tableData: [
        {
          id: 1,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 2,
          account: 987654321,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 3,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 4,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 5,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 6,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 7,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 8,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 9,
          account: 123456789,
          teamName: '菜跟团',
          administrators: '',
          address: '',
        },
        {
          id: 10,
          account: 123456789,
          teamName: '菜跟团s',
          administrators: '',
          address: '',
        },
      ],
    }
  },
  methods: {
    enter(row, column, cell) {
      console.log('row', row.id)
      this.isshow = row.id
      console.log('column', column)
      console.log('cell', cell)
    },
    leave(row, column, cell) {
      this.isshow = -1
    },
  },
}
</script>

<style scoped lang="scss">
* {
  padding: 0%;
  margin: 0%;
}
.div {
  .top-div {
    position: absolute;
    top: 0;
    width: 100%;
    height: 45.6px;
    background-color: white;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; //不换行。
    justify-content: space-between;
    //面包屑的样式。
    .el-breadcrumb {
      margin-left: 23px;
    }
  }
  .table-div {
    padding: 10px 20px;
    margin-top: 40px;
    background-color: white;
    .ordersituation-input {
      margin-left: 5px;
      width: 270px;
      //input的按钮。
      button.el-button.el-button--default.el-button--small {
        width: 42px;
        height: 32px;
        background-color: rgb(24, 144, 255);
      }
      ::v-deep .el-icon-search:before {
        color: white;
      }
      ::v-deep .el-input-group__append {
        border: none;
        padding: 0;
      }
    }

    //hover盒子样式。
    .el-butotn-div {
      width: 300px;
      display: inline-block;
      position: absolute;
      right: -13px;
      top: 0%;
    }
    button.el-button.el-button--default.el-button--small {
      border: 0;
      width: 33%;
      height: 39.4px;
      margin: 0;
      font-size: 14px;
      background-color: rgb(24, 144, 255);
      color: white;
      border-radius: 0;
    }
    // table数据垂直居中。
    ::v-deep .cell {
      text-align: center;
    }
  }
  .bottom-div{
    //设置分页的位置为“向右对齐”。
    .bottom-div-paging{
      text-align: right;
      margin-right: 20px;
    }
  }
}
</style>
